<!--头部公共部分-->
{include file="common/header" /}


<div style="padding:15px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item" style="text-align: center;">
            <a class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger">讲台</a>
        </div>
        <fieldset class="layui-elem-field " style=" border-color: #00b7ee;">
            <legend style="font-size: 15px;color: #00b7ee">选位区域【可分配{$nums}个座位】</legend>
        <div class="layui-row" style="text-align: center;margin-top: 10px;">

            <input type="hidden" id="student_id" value="">

                <script>
                    var seat_row = '{$seat_row}';  //行
                    var seat_column = '{$seat_column}';  //列
                    var seat_nums = '{$seat_nums}'; //选中的座位数
                    var arr_number_names = '{$arr_number_names}'  //座位对应的编号对应的字符串
                    var arr_number_names_ = arr_number_names.split(",");
                    var name_value = '{$name_value}';  //最长的名字
                    var name_value_len = name_value.length;

                    /*****设置默认字符长度*****/
                    var value_name_str = "";
                    for(var r = 0; r <name_value_len; r ++){
                        value_name_str = value_name_str + "&nbsp;&nbsp;";
                    }
                    var arr_ = seat_nums.split(",");
                    var seat = seat_row * seat_column; //总个数
                    var length = (seat+"").length;
                    var title = "";
                    for(var k = 0; k < length; k ++){
                        title = title + "0";
                    }
                    var arr_numbers = '{$arr_numbers}'; //选中者编号
                    var arr_numbers_ =  arr_numbers.split(",");  //分割数组

                    var arr__ = new Array();   //构造数组
                    for(var q = 0; q < arr_.length; q ++){
                        arr__[""+arr_[q]] = q+1;
                    }
                    var num = 0;
                    var i = 0;
                    var j = 0;
                    for(i = 0; i < seat_row; i ++){

                        for(j = 0; j < seat_column; j ++  ){
                            num ++;
                            if(arr_.length >=1 && arr_[0] != ""){
                                if(arr_.indexOf(num+"") != -1){   //判断数组中是否包含此项
                                    if(arr_numbers_.indexOf(""+arr__[num+""]) != -1){
                                        var value = (arr__[num+""]+"");
                                        var name_value = "";
                                        for(var b = 0; b < arr_number_names_.length; b++){
                                            if(arr_number_names_[b].indexOf(value) != -1){
                                                name_value = arr_number_names_[b].split("-")[0];  //姓名
                                            }
                                        }


                                        var des = name_value_len - name_value.length;
                                        var str___ = "";
                                        for(var r = 0; r <des; r ++){
                                            str___ = str___ + '&nbsp;&nbsp;';
                                        }

                                        name_value = name_value + str___;


                                        var str_ = "";
                                        var g = (length - value.length);
                                        for(var p=0; p< g; p++){
                                            str_ = str_+"0";
                                        }

                                        value = str_+value;
                                        document.write('<div  name="item"  class="layui-inline" style="visibility: visible">');
                                        document.write('<input type="checkbox" lay-skin="primary"  lay-filter="seat" title="'+name_value+'" name="ids" value="'+ num +'"checked >');
                                        document.write('</div>');

                                    }else{
                                        document.write('<div  name="item" class="layui-inline" style="visibility: visible">');
                                        document.write('<input type="checkbox" lay-skin="primary" lay-filter="seat"  title="'+value_name_str+'" name="ids" value="'+ num +'" >');
                                        document.write('</div>');
                                    }

                                }else{
                                    document.write('<div   name="item"  class="layui-inline" style="visibility: hidden">');
                                    document.write('<input type="checkbox" lay-skin="primary" lay-filter="seat" title="'+value_name_str+'" name="ids"  value="'+ num +'"   disabled>');
                                    document.write('</div>');
                                }
                            }else {
                                document.write('<div   name="item"  class="layui-inline" style="visibility: visible">');
                                document.write('<input type="checkbox" lay-skin="primary" lay-filter="seat" title="'+value_name_str+'" name="ids"   value="'+ num +'" >');
                                document.write('</div>');
                            }

                        }
                        document.write('<p>');

                    }
                </script>
        </div>

        </fieldset>

        <div class="layui-collapse" style="margin-bottom: 10px; border-color: #00b7ee;" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title" style=" font-size: 15px;color: #00b7ee">班课学员信息</h2>
                <div class="layui-colla-content layui-show" >
                    <table class="layui-hide"  id="LAY_table_user" lay-filter="table"></table>
                    <script type="text/html" id="barTable">
                        {{# if(d.seat_number === null){ }}
                        <input type="radio"   name="student_name" value="{{d.student_name+','+d.id}}" title="未锁定" lay-skin="primary" lay-filter="locking" >

                        {{# } else { }}
                        <input type="radio"  name="student_name" value="{{d.student_name+','+d.id}}" title="已锁定" lay-skin="primary"  disabled checked>

                        {{# } }}
                    </script>
                </div>

            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;margin-top: 10px">
            <input class="layui-btn" value="重排" lay-submit lay-filter="reset" readonly>
        </div>

    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
    var seat_id = '{$seat_id}';
    var seat_row = '{$seat_row}';  //行
    var seat_column = '{$seat_column}';  //列
    var seat = seat_row * seat_column; //总个数
    var seat_nums = '{$seat_nums}'; //选中的座位数
    var arr_ = seat_nums.split(",");
    var arr_nums = new Array();
    for(var q = 0; q < arr_.length; q ++){
        arr_nums[""+arr_[q]] = q+1;
    }
    layui.use(['element', 'table','jquery','form','layer'], function(){
        var $ = layui.jquery
            ,element = layui.element
            ,layer = layui.layer
            ,table = layui.table
            ,form = layui.form;
        var inputs = document.getElementsByName("ids");
        var items =  document.getElementsByName("item");
        var loading;
        var numbers = 0;
        //数据表格 方法级渲染
		var subject_id = '{$subject_id}';
		var room_id = '{$seat_id}';
		var campus_id = '{$campus_id}';
        var tableIns = table.render({
            elem: '#LAY_table_user'
            , url: '{:url("Classroom/getstudentlist")}?id=' + subject_id + "&room_id=" + room_id + "&campus_id=" + campus_id
            , method: 'POST'
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 100, sort: true, fixed: false, align: 'center'
                }, {field: 'student_name', title: '姓名',style:'font-weight: bold;', width: 100, align: 'center'
                }, {field: 'campus_name', title: '归属校区', style:'font-weight: bold;',width: 100, align: 'center'
                }, {field: 'class_room_name', style:'font-weight: bold;',title: '教室名称', width: 100, align: 'center',edit: 'text'
                }, {field: 'course_name',style:'font-weight: bold;', title: '课程名称', width: 290, align: 'center'
                }, {field: 'update_time',style:'font-weight: bold;', title: '最新时间', width: 200, align: 'center'
                }, {field: 'status_text', style:'font-weight: bold;',title: '状态', width: 150, align: 'center'
                },{fixed: 'right', title: '选择', width: 150, align: 'center', toolbar: '#barTable'}
            ]]
            , height: 'full-180'
            , page: true
            , done: function () {
                $("[data-field='id']").css('display','none');
                layer.close(loading);
            }
        });




        //监听锁定操作
        form.on('radio(locking)', function(obj){
            layer.tips('【'+this.value.split(",")[0]+'】' + '正在进行选座操作', obj.othis);
            var id = this.value.split(",")[1]; //ID号
            $("#student_id").val(id);  //设置隐藏域的值


        });



        //监听选中事件
        form.on('checkbox(seat)', function(data){
            /*
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            */

            var field = {};

            var seat_number;
            var length = (seat+"").length;
            var title = "";
            var url = "";  //url
            for(var b = 0; b < length; b ++){
                title = title + "0";
            }
            for(var i=0;i<inputs.length;i++){
                if(inputs[i].value == data.value){
                    if(data.elem.checked){
                        var str = "";
                        seat_number = arr_nums[data.value]; //获取座位编号
                        var student_id = $("#student_id").val();  //获取隐藏域的值
                        if(student_id.length <= 0){
                            data.elem.checked = false;
                            form.render(); //重新渲染
                            layer.msg("请在【班课学员信息管理中】勾选学员");
                            return;
                        }
                        field.student_id = student_id;  //学生ID
                        field.seat_number = seat_number //座位编号

                        var j =  length-(arr_nums[data.value]+"").length;
                        for(var k =0; k < j; k ++){
                            str = str + "0";
                        }
                        str = str + arr_nums[data.value];
                        inputs[i].title = str;
                        url = '/admin/classroom/set_student_seat';
                    }else{
                        field.room_id = seat_id;
                        field.class_subject_id = '{$subject_id}';  //课程表
                        field.seat_number =  arr_nums[data.value]//座位编号
                        inputs[i].title = "";
                        url = '/admin/classroom/cancle_seat';
                    }


                    //异步提交

                     $.ajax({
                     url: url,
                     method: "post",
                     data: field,
                     beforeSend: function () {
                     isLoad = layer.load(0, {
                     shade: false
                     }); //0代表加载的风格，支持0-2
                     },
                     success: function (result) {
                     layer.msg(result.msg);
                     if (result.code === 1) {

                         setTimeout(function () {
                             location.reload();
                         }, 1000);

                     }
                     },
                     complete: function () {
                     layer.close(isLoad)
                     },
                     error: function (error) {
                     console.log(error)
                     }
                     });
                    form.render(); //重新渲染
                }
            }
        });




        //监听提交
        form.on('submit(reset)', function (data) {
            var isLoad;
            var field = {};
            field.class_subject_id = '{$subject_id}';;  //课程表

            $.ajax({
                url: '/admin/classroom/reset_student_seat',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {

                        setTimeout(function () {
                            location.reload();
                        }, 1000);


                    }
                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            form.render(); //重新渲染
            return false;
        });
    });


</script>